import React, { Component } from 'react';
import { Button, notification, Progress, message, Icon } from 'antd';
import styles from './draw.css';
import Model, { instance, counterState } from './model/model';
import Link from 'umi/link';
import { observer } from 'mobx-react';

export default function() {
  return (
    <div className={styles.normal}>
      <h1>Page draw</h1>
      <DrawPage />
    </div>
  );
}

const initialState = { clicksCount: 0, log: _log, model: instance };

function _log(msg: string) {
  console.log(`我要输出日志 ${msg}`);
  notification.open({
    message: msg,
  });
}

type State = Readonly<typeof initialState>;

@observer
class DrawPage extends Component<{}, State> {
  state: State = initialState;

  render() {
    const { clicksCount, model } = this.state;
    return (
      <div>
        <div>我点了{clicksCount}次</div>
        <div>全局次数: {model.n}</div>
        <div>app counter state count: {counterState.count}</div>
        <Button
          type="primary"
          onClick={() => {
            model.n = model.n + 1;
            counterState.count++;
            // this.setState(p => ({ clicksCount: p.clicksCount + 1, model }));
          }}
        >
          <Icon type="caret-right" theme="filled" />
          我是点击事件
          <Icon type="plus-circle" theme="filled" />
        </Button>
        <Button>
          <Link to="/">去首页</Link>
        </Button>
        <Progress percent={a} />
      </div>
    );
  }
}

var a = 0;

function click() {
  notification.open({
    message: '你好',
    duration: 0,
  });
}
